En la entrada de hoy vamos a ver cómo poner una imagen de fondo en HTML, o mejor dicho, cómo poner una imagen de fondo en CSS. Es una entrada especialmente pensada para usuarios que están iniciándose en el mundo del diseño web. Si perteneces a este grupo, ponte cómodo, ya que ¡comenzamos!
Antes de pasar a detallar cómo poner una imagen de fondo con CSS en HTML te aviso que necesitarás tener nociones básicas de HTML y de sus etiquetas y atributos. Si ya conoces algo sobre cómo programar en HTML y sobretodo en CSS, puedes saltarte directamente el siguiente punto.
Cómo usar CSS
Antes de comenzar, debes saber que hay tres formas, a priori, de darle estilos a tu página web. Las tres formas serían las siguientes:
- CSS en Hoja de estilos externa.
- CSS dentro del <head> del documento HTML, usando las etiquetas HTML <style>.
- CSS en línea.
Durante la entrada, todos los ejemplos que usaré están realizados usando una hoja de estilos externa del documento HTML. De hecho, hacerlo así es lo más recomendable en casi todos los proyectos.
Para dar estilos CSS a tu página web, primero debes apuntar a un selector, que puede ser por ejemplo una etiqueta HTML. También puedes usar un atributo de «clase» o un «id». A continuación, la declaración de estilos (propiedad + valor), deberás introducirla dentro de unas llaves como las siguientes: { }.
Por lo tanto, en tu código deberás ver algo así:
body {
/* Aqui se introduce la declaración de estilos */
} Con las llaves, definimos que reglas se aplicarán al selector seleccionado. En este caso, hemos elegido una etiqueta HTML (body) como selector.
Además de añadir una imagen de fondo a tu sitio web, también podrás añadir un video de fondo HTML de forma muy fácil
Colocar una imagen de fondo en una página web
Para añadir una imagen de fondo en una página web, hay usar la propiedad background-image seguida de un valor, en este caso la URL de la imagen que vamos a usar de imagen de fondo. La declaración quedaría algo similar a esto: background-image: url(«/nombre-de-la-imagen.jpg/»).
Visualmente el resultado sería este:
Diferentes tipos de imagen de fondo
En el ejemplo anterior hemos visto cómo poner una imagen de fondo en HTML a través de la propiedad: background-image. Junto a esta propiedad, existen además otras que complementan como puedes programar una imagen de fondo en HTML. Las propiedades que puedes usar junto a background-imagen son las siguientes:
- Background-repeat
- Background-position
- Background-attachment
Background-repeat
La propiedad “background-repeat” repite por defecto la imagen de fondo hasta cubrir por completo la superficie del elemento que lo contiene. Por ejemplo, si nuestra página web mide 800px de alto y 800px de ancho, y el fondo de la imagen mide 100x100px, el fondo se repetirá hasta cubrir los 800px.
Los valores que esta propiedad admite son los siguientes:
- repeat: La imagen de fondo siempre se repetirá hasta llenar el contenedor.
- repeat-y: Se repite únicamente de manera vertical, es decir en el eje y.
- repeat-x: Se repite únicamente de manera horizontal, es decir se repetirá en el eje-x.
- no-repeat: La imagen se muestra, pero no se repite.
Por defecto, esta propiedad tiene el valor «repeat». Lo habitual, cada vez que usas la propiedad «background-image», es usar la propiedad «repeat» con el valor «no-repeat».
En el siguiente ejemplo verás una imagen de fondo que se repite solo en el eje vertical.
Background-position
Si tenemos una imagen de fondo que hemos decidido no repetir a lo largo de todo el contenedor, es posible que esta imagen no cubra la totalidad de la superficie y por tanto, quede espacio libre. En ese caso, es posible determinar la posición de la imagen de fondo mediante la propiedad “background-position”.
También es posible determinar esta propiedad incluso cuando la imagen de fondo ocupe todo el ancho o el alto, pudiendo escoger su posición en el eje vertical u horizontal, dependiendo del caso. Veamos en el siguiente ejemplo como centrar una imagen de fondo en el centro del contenedor:
Background-size
También podemos definir el tamaño que tendrá la imagen de fondo, si esta no se repite y tampoco ocupa la totalidad del contenedor.
Por defecto, el tamaño de la imagen de fondo se mostrará al máximo de su tamaño. Si por ejemplo, la imagen es más grande que el contenedor, solo veremos parte de la imagen. Para solucionarlo, podemos definir el tamaño de la imagen con la propiedad «background-size«, junto a un valor que puede ser indicado con diferentes medidas relativas o absolutas (rem, em, %, picas, cm, px, etc)
En el siguiente ejemplo vamos a ver como poner una imagen de fondo que ocupe la totalidad del contenedor:
Background-attachment
Esta propiedad determina el comportamiento de la imagen de fondo durante el scroll de la página. Esto significa que podemos escoger si el fondo permanecerá estático o acompañara al scroll de la ventana del navegador del usuario. Para dejar la imagen estática, el valor a indicar debe ser: «fixed«. Por el contrario, si queremos que haga scroll, o bien no definimos esta propiedad, o la forzamos con el valor: «scroll«.
Es muy habitual emplear la combinación de fondos con distintos comportamientos o similares.
Conclusión
Como has podido comprobar, poner una imagen de fondo en css es muy fácil. Tan solo necesitas tener un poco de conocimientos previos de css y HTML. Si tienes dudas con alguna de las propiedades no dudes en dejarme un comentario y te reponderé lo más rápido posible.
¡Hasta la próxima!
Deberias postear mas aportes como este… Muchas gracias Saludos
Muchas gracias por tu comentario. ¡Lo tendré en cuenta!
Excelente, muchas gracias…
Buenos días, Jesús.
Muchas gracias a ti por los comentarios y por la lectura.
¡Un saludo!
Gracias por el aporte, como podría poner una imagen animada o un video corto como tu tienes?
Buenos días, Sebastián. En primer lugar, quería agradecerte la lectura. Sobre tu consulta, podrás poner un video de fondo en tu web siguiendo los pasos que aquí describo. ¡Un saludo!
¿Cómo puedo establecer como background un archivo jpg que esté dentro de mi carpeta «images»?
background-image:url(aqui pones tu imagen jpg o png)
se podria con una svg?
Excelente. Gracias…
Buenos días, Héctor. Muchas gracias por tu comentario. Un saludo
Todo super claro! Muchas gracias
Buenos días, Maqui, y muchas gracias por leernos. ¡Un saludo!
Estimado, buen día.
Y para el caso que les imagen la tengamos en el disco rígido,
Cómo sería en ese caso?
Saludos
Jorge
Muy buen trabajo, se agradece mucho el aporte!
Excelente
Muchas gracias!
No sabes cuanto me ha ayudadado este tuto, un fuerte abrazo y un gran saludo!!
Muchas gracias a tí, Andrés, por la lectura y el comentario. Nos anima a seguir creando contenido. ¡Un saludo!
Hola, una consulta; probé el codigo pero no me queda como en tu ejemplo, en lugar de verse en lo que seria el cuerpo del articulo o post, me aparece arriba debajo de la barra de direccion del navegador encima del menu de mi pagina, porque es eso?
Buenos días, Rubén.
Para poder ayudarte, tendría que ver tu caso en concreto en tu web, o bien saber cuál de los ejemplos estás aplicando en tu página. De todas formas, por lo que comentas, tiene pinta de que estás «apuntando» el fondo de la imagen a un selector incorrecto. En los ejemplos, yo usé la etiqueta
, pero en tu caso, quizás no deberías usar ese y deberías usar un «id» o «clase» que apunte al cuerpo de tu artículo.Me cuentas si logras solucionarlo.
Un saludo!